<template>
  <div>
    <public-modal width="850px" :footer="false" :title="title" :publicVisible="publicVisible" @cancel="cancel">
      <div slot="content" class="content">
        <div class="content-warpper">
          <table>
            <tr>
              <th>评估月份</th>
              <th>本月基础分</th>
              <th>本月印象分</th>
              <th>本月不良行为积分</th>
              <th>本月总分变化</th>
              <th>风险等级</th>
              <th>本月末总分</th>
            </tr>
            <tr>
              <td>2025年9月</td>
              <td class="basis-score">
                <span>47</span>
              </td>
              <td>-5</td>
              <td>44</td>
              <td>+1.5</td>
              <td class="">
                <div class="red-bg">极高风险</div>
              </td>
              <td>80</td>
            </tr>
          </table>
        </div>
        <div class="content-basic common-title">
          <div class="title-box flex">
            <div class="circle"></div>
            <div class="title">本月基础分</div>
          </div>
          <table>
            <tr>
              <th style="width: 140px">评估维度</th>
              <th>评分标准</th>
              <th class="score-column">评估结果<br />(分数/示例)</th>
              <th style="width: 100px">总分</th>
            </tr>
            <tr>
              <td class="col-name">不良行为历史严重性与频率</td>
              <td>
                <div>偶发、情节轻微（如逃学、轻微打架）：1-5分/次</div>
                <div>多次、情节较重（如偷窃、校园霸凌）：5-10分/次</div>
                <div>习惯性、情节严重（如多次抢劫、接触违禁药物）：10-20分/次</div>
              </td>
              <td class="score-column">
                <div>多次逃学、吸烟、一次偷窃。</div>
                <div class="highlight">18</div>
                <!-- 或作为评分，如果是评分则调整样式 -->
                <!-- 如果26.23%是额外信息，可以这样保留 -->
              </td>
              <td rowspan="4" class="total-row">42</td>
            </tr>
            <tr>
              <td class="col-name">家庭监护情况</td>
              <td>
                <div>监护人有能力且愿意配合：0-3分</div>
                <div>监护人能力不足或配合度一般：4-7分</div>
                <div>监护人失职、失联或存在家庭暴力：8-10分</div>
              </td>
              <td class="score-column">
                <div class="example">父亲监护不力，母亲软弱。(12)</div>
              </td>
            </tr>
            <tr>
              <td class="col-name">社会交往情况</td>
              <td>
                <div>朋友圈中有不良行为者：1-3分/人</div>
                <div>与有犯罪前科或社会闲散人员交往密切：4-7分/人</div>
                <div>参与或疑似参与不良团体：8-10分</div>
              </td>
              <td class="score-column">
                <div class="example">有社会闲散朋友 (8)</div>
              </td>
            </tr>
            <tr>
              <td class="col-name">心理与性格因素</td>
              <td>
                <div>个人心理与性格因素：0-5分</div>
                <div>存在明显情绪控制障碍、冲动易怒、极度叛逆等：1-5分</div>
              </td>
              <td class="score-column">
                <div class="example">冲动、叛逆。(4)</div>
              </td>
            </tr>
          </table>
        </div>
        <div class="careGroup common-title">
          <div class="title-box flex">
            <div class="circle"></div>
            <div class="title">关爱小组月度印象评分</div>
          </div>
          <table>
            <tr>
              <th class="col-name">角色</th>
              <th class="col-name">姓名</th>
              <th style="width: 200px">评估情况</th>
              <th class="pscore">评分</th>
              <th class="pscore">总分</th>
            </tr>
            <tr>
              <td>民警</td>
              <td>张明静</td>
              <td>无明显不良行为，但观察中</td>
              <td class="score">-1</td>
              <td rowspan="4" class="total">-5</td>
            </tr>
            <tr>
              <td>
                社区干部
                <!-- <span class="percentage"></span> -->
              </td>
              <td>王社工</td>
              <td>谈话有回应，态度尚可</td>
              <td class="score">-2</td>
            </tr>
            <tr>
              <td>老师</td>
              <td>李老师</td>
              <td>无进步也无违纪</td>
              <td class="score">0</td>
            </tr>
            <tr>
              <td>
                志愿者
                <!-- <span class="percentage"></span> -->
              </td>
              <td>陈大哥</td>
              <td>一起打球，相处愉快</td>
              <td class="score">-2</td>
            </tr>
            <!--  <tr>
              <td colspan="3" style="text-align: right; padding-right: 10px; font-size: 14px">总分：</td>
              <td class="score" style="font-size: 16px">-5</td>
            </tr> -->
          </table>
        </div>
        <div class="bad-behavior common-title">
          <div class="title-box flex">
            <div class="circle"></div>
            <div class="title">不良行为</div>
          </div>
          <table>
            <tr>
              <td>1</td>
              <td>A类行为</td>
              <td>逃学一次</td>
              <td class="score">+5</td>
              <td rowspan="4" class="total">43</td>
            </tr>
            <tr>
              <td>2</td>
              <td>B类行为</td>
              <td>霸凌同学</td>
              <td class="score">+8</td>
            </tr>
            <tr>
              <td>3</td>
              <td>C类行为</td>
              <td>盗窃</td>
              <td class="score">+10</td>
            </tr>
            <tr>
              <td>4</td>
              <td>D类行为</td>
              <td>一起打球，相处愉快</td>
              <td class="score">+20</td>
            </tr>
          </table>
        </div>
      </div>

      <div slot="footer"></div>
    </public-modal>
  </div>
</template>

<script>
import { uploadFile } from '@/api/api'
import { checkIDCard } from '@/utils/validate.js'
import publicModal from '@/components/publicModal'
import { putAction, postAction } from '@/api/manage'
import { isMobile } from '@/utils/validate'
import { getDictItemsFromCache } from '../../../../api/api'
import { getPrefixImg, previewImage } from '../../../../utils/util'
import moment from 'moment'
import { getFileAccessHttpUrl } from '../../../../api/manage'

export default {
  name: 'addPatientModal',
  components: { publicModal },
  props: {
    /*  institution: {
      type: Object,
      default: () => ({}),
    }, */
  },
  data() {
    return {
      title: '风险积分',
      record: {},
      status: 0,
      publicVisible: false,
      imageUrl: [],
      fileList: [],
      showUploadList: { showPreviewIcon: false },
      form: {},
      rules: {
        name: [{ required: true, message: '请输入!' }],
        nation: [{ required: true, message: '请选择精神障碍等级!' }],
        idCard: [
          { required: true, message: '请输入!' },
          {
            validator: (rule, value, callback) => {
              if (!checkIDCard(value)) {
                callback(new Error('请输入正确的身份证号'))
              } else {
                callback()
              }
            },
          },
        ],
        currentAddress: [{ required: true, message: '请输入!' }],
      },
      nationList: getDictItemsFromCache('nation'),
      bloodList: getDictItemsFromCache('blood_type'),
      actionType: '',
      uploadImgRef: null,
      imgPrefix: getPrefixImg(),
    }
  },
  // inject: ['provideData'],
  mounted() {},
  methods: {
    async show(record = {}, actionType = 'add') {
      this.actionType = actionType
      this.record = record
      this.publicVisible = true

      if (actionType == 'edit') {
        this.title = `编辑不良行为未成年人`
        this.form = { ...record }
        console.log(this.form)
        if (record.userImg) {
          const obj = {
            uid: record.userImg,
            name: record.userImg,
            status: 'done',
            url: this.imgPrefix + record.userImg,
          }
          this.fileList = [obj]
          this.imageUrl = [{ halfPath: record.userImg }]
        }
      } else {
        this.title = `风险积分`
        this.$set(this.form, 'policeAgencyName', this.institution.policeAgencyName)
      }
    },
    cancel() {
      this.$emit('cancel')
    },

    remove(file) {
      console.log('remove')
      let uid = file.uid
      let index = this.fileList.findIndex((v) => {
        return v.uid == uid
      })
      this.fileList.splice(index, 1)
      this.imageUrl.splice(index, 1)
      // 上传完成之后，隐藏上传框
      let uploadDom = this.$refs.uploadImgRef.$el.getElementsByClassName('ant-upload-select-picture-card')[0]
      uploadDom.style.display = 'flex'
    },
    async customRequest(info) {
      let file = info.file
      const formData = new FormData()
      formData.append('file', file)
      formData.append('type', 2)
      let res = await uploadFile(formData)
      if (res.code == 200) {
        this.imageUrl = [res.result]
        this.fileList = [res.result].map((item, index) => {
          return {
            uid: index,
            status: 'done',
            url: item.fullPath,
          }
        })

        // 上传完成之后，隐藏上传框
        let uploadDom = this.$refs.uploadImgRef.$el.getElementsByClassName('ant-upload-select-picture-card')[0]
        uploadDom.style.display = 'none !important'
      }
    },
    uploadChange({ file, fileList }) {
      file.status = 'done'
      this.fileList = fileList
    },

    handleOk() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        let url = ''
        if (this.actionType == 'add') {
          url = '/wb/mentalpatient/addMentalPatient'
        } else {
          url = '/wb/mentalpatient/addMentalPatient'
        }
        const method = this.record.id ? postAction : postAction
        try {
          const res = await method(url, {
            ...this.form,
            policeAgencyId: this.institution.id,
            userImg: this.imageUrl.map((item) => item.halfPath).join(','),
            judgmentTime: moment(this.form.judgmentTime).format('yyyy/MM/DD HH:mm:ss'),
          })
          this.$message.success(res.message)
          this.$emit('refresh')
          this.cancel()
        } catch (error) {
          // 处理错误
          console.error('请求失败:', error)
          this.$message.error('请求失败，请稍后重试！')
        }
      })
    },
    handleAdd() {
      this.$refs.addRef.show()
    },

    cancel() {
      this.publicVisible = false
      this.fileList = []
      this.imageUrl = []
      this.form = {}
    },
    handlePreview(urls = []) {
      urls = urls.map((item) => item.halfPath)
      previewImage.call(this, urls)
    },
  },
}
</script>

<style scoped lang="less">
.content {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 50px;
}
.content-warpper {
  padding: 30px;
  table {
    // width: 90%;
    border-collapse: collapse;
    //margin: 0 auto;
    width: 100%;

    // color: white;
    color: #8fbbff;
  }

  th,
  td {
    padding: 10px;
    text-align: center;
    border: 1px solid #0855cc;
    width: 160px;
    height: 46px;
  }

  /*   .highlight {
    background-color: #ff4d4f;
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 5px;
  } */

  .red-bg {
    background-color: #ff4d4f;
    //padding: 5px 10px;
    border-radius: 4px;
    margin-left: 35px;
    width: 72px;
    height: 30px;
    line-height: 30px;
    // text-align: center;
    color: #fff;
    font-size: 14px;
  }
}
.common-title {
  .title-box {
    align-items: center;
    margin-bottom: 15px;
    margin-top: 15px;
    .circle {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #1970f6;
    }
    .title {
      font-size: 14px;
      color: #8fbbff;
      margin-left: 8px;
    }
  }
}
.content-basic {
  table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }

  th,
  td {
    padding: 10px;
    text-align: left;
    border: 1px solid #0855cc;
    width: fit-content;
  }

  th {
    background-color: #0056b3;
    color: white;
  }

  .score-column {
    background-color: #0056b3;
    color: white;
    text-align: center;
  }

  .highlight {
    background-color: #ff4d4f;
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
  }

  .example {
    color: #fff; /* 白色文字 */
    background-color: rgba(255, 255, 255, 0.1); /* 半透明背景以适应蓝色背景 */
    padding: 2px 5px;
    border-radius: 3px;
    margin: 2px 0;
    display: inline-block; /* 使示例内容独占一行但保持紧凑 */
  }
  .total-row {
    font-weight: bold;
    // background-color: #ffd700;
    text-align: center;
    font-size: 18px;
  }
}
.careGroup {
  table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    background-color: #0946a8;
    color: white;
  }

  th,
  td {
    padding: 10px;
    text-align: left;
    //border: 1px solid #003d82;
    border: 1px solid #0855cc;
  }

  th {
    background-color: #004494;
  }
  .col-name {
    width: 180px;
  }
  .pscore {
    width: 200px;
  }
  .total {
    font-weight: bold;
    // background-color: #ffd700;
    text-align: center;
    font-size: 18px;
  }

  .percentage {
    background-color: #ff4d4f;
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 5px;
    font-size: 0.8em;
  }

  .score {
    text-align: center;
    background-color: #07429e;
  }
}
.bad-behavior {
  table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    background-color: #0946a8;
    color: white;
  }

  th,
  td {
    padding: 10px;
    text-align: left;
    //border: 1px solid #003d82;
    border: 1px solid #0855cc;
  }
  .total {
    font-weight: bold;
    // background-color: #ffd700;
    text-align: center;
    font-size: 18px;
  }
}
</style>
